<template>
  <el-select
    v-model="selectedUser.userNo"
    @click="openDialog"
    :style="{ width: props.width }"
    disabled
  >
    <el-option
      :key="selectedUser.userNo"
      :label="selectedUser.username"
      :value="selectedUser.userNo"
    />
  </el-select>
  <OwnerSelect
    v-model="visible"
    :onCancel="close"
    :onSubmit="handleData"
    ref="ownerSelect"
  />
</template>

<script setup>
import { ref, watch } from 'vue'
import OwnerSelect from './OwnerSelect.vue'

const ownerSelect = ref(null)
const visible = ref(false)
const model = defineModel()
const selectedUser = ref({})

const props = defineProps({
  width: {
    type: String,
    default: '415px',
  },
})

watch(model, (newVal) => {
  if (newVal && newVal !== selectedUser.value.userNo) {
    selectedUser.value.userNo = newVal
  }
})

watch(
  () => selectedUser.value.userNo,
  (newVal) => {
    model.value = newVal
  },
)

function openDialog() {
  visible.value = true
}

function handleData() {
  selectedUser.value = ownerSelect.value.selectedUser
  visible.value = false
}

function close() {
  visible.value = false
}
</script>
<style scoped>
:deep(.el-select__wrapper.is-disabled) {
  background-color: white;
}
</style>
